<template>
  <div>
    <div id="previewEditor" />
  </div>
</template>

<script>
import Spreadsheet from '@hk/x-data-spreadsheet'
import { getTemplate } from '@/api/specialProject/templateManage'

export default {
  data() {
    return {
      id: null,
      xs: null
    }
  },
  async mounted() {
    await this.getPreviewData()
    this.$nextTick(() => {
      this.xs = new Spreadsheet('#previewEditor',
        {
          showToolbar: false,
          showGrid: true,
          mode: 'read'
        })
    })
  },
  methods: {
    getPreviewData() {
      getTemplate({ id: this.$route.query.id }).then((res) => {
        this.content = res.content
        this.xs.loadData(JSON.parse(this.content || '[]'))
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
